<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>OAuth作业练习首页面</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="./js/element-ui/index.css"/>
    <style type="text/css">
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
            margin: 0;
            padding: 0;
        }
        *, *::before, *::after {
            box-sizing: inherit;
            outline: 0 none;
        }
        body{
            font-family: "Microsoft YaHei","SF Pro Display",Roboto,Noto,Arial,"PingFang SC",sans-serif;
        }
        #app .top{
            height:60px;
            line-height:60px;
            padding-left:20px;
            font-size:20px;
            color:#FFF;
            background-color: #409eff;
        }
        .fileCollect-form-edit{
            width:1200px;
            margin:0 auto;
        }
        .top .title{
            width:200px;
        }
        .desc-tip{
            font-size:12px;
            width:1200px;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container v-loading="floading"
                      element-loading-text="正在处理"
                      element-loading-spinner="el-icon-loading"
                      element-loading-background="rgba(0, 0, 0, 0.3)">
            <el-header class="top">
                <span class="title">小马哥实战训练营作业V20210421</span>
            </el-header>
            <el-container style="padding:10px;">
                <el-form :model="form" size="mini" ref="form1" label-position="right" :label-width="formLabelWidth" :rules="rules" class="fileCollect-form-edit">

                    <el-row style="text-align:center;">
                        <el-button size="mini" type="primary" @click="giteeClick">Gitee登录测试</el-button>
                    </el-row>
                </el-form>

            </el-container>
            <el-divider content-position="left">状态说明</el-divider>
            <div class="desc-tip">
                1、当前用户信息为:{{userStatus}}
            </div>
        </el-container>
    </div>
</body>
<script type="text/javascript" src="./js/vue.min.js"></script>
<script type="text/javascript" src="./js/vue-router.js"></script>
<script type="text/javascript" src="./js/element-ui/index.js"></script>
<script type="text/javascript" src="./js/axios.min.js"></script>
<script type="text/javascript">


    var vm = new Vue({
        el : '#app',
        data : {
            floading:false,
            formLabelWidth: '150px',
            form:{

            },
            rules:{

            },
            userStatus:""
        },
        created:function(){
            this.queryUserSession();
        },
        methods : {
            giteeClick:function () {
                var self = this;
                window.location.href = "/oauth/gitee/authorize";
            },
            queryUserSession:function(){
                var self = this;
                var url = "/getUserSession";
                axios({
                    method: "get",
                    url: url
                }).then(function (response) {

                    if(response && response.data ){
                        self.userStatus = response.data;
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            }
        }
    });


</script>





</html>